<!--
 * @Description:订单卡片组件 ，展示单项订单内容的卡片
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-10 14:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-24 15:16:47
-->
<template>
	<view class="">
		<view class="shop-name">
			<uni-icons type="shop-filled" size="20" color="orange"></uni-icons>
			<view class="shop-box" @click.capture="goShopBar">
				{{ orderDetails.shopName  }}
			</view>

		</view>
		<view class="order-card-container">
			<image style="width: 204rpx; height: 204rpx; border-radius: 26rpx" :src="$u.file.getMedieUrl(orderDetails.image )"
				mode="aspectFill" @click="goGoodsDetail()"></image>
			<view class="describe-box">
				<view class="" style="display: flex; justify-content: space-between; align-items: center">
					<view class="goods-name">
						{{ orderDetails.goodsName || orderDetails.name  }}
					</view>
					<view :class="`goods-price ${orderDetails.original ? 'original' : ''}`">
						${{ orderDetails.price.toFixed(2) }}
						<!--   <template v-if="orderDetails.originalPrice">
				        <text>${{ publicJS.toFixed(orderDetails.originalPrice) }}</text>
				    </template> -->
					</view>
				</view>

				<view class="goods-des" v-if="orderDetails.skuAttr ">
					{{ orderDetails.skuAttr }}
				</view>



				<view class="control" style="font-size: 28rpx; ">
					<view class="">x{{ orderDetails.num || followUrlData.num  }}</view>

				</view>

				<view class="handle-button" v-if="btnText">
					<u-button type="default" @click="pay">{{ btnText }}</u-button>
				</view>
				<view class="order-finished-time" v-if="time">
					{{ time }}
				</view>
			</view>
			<!-- <view v-if="icon" class="icon-box">
            <u-icon name="edit-pen"></u-icon>
            <u-icon name="close"></u-icon>
        </view> -->
		</view>
		<view class="btn-control" v-if='orderDetails.orderStatus!= 0 && orderDetails.orderStatus!= -1'>
			<!-- 申请退款 -->
			<button v-if=" showBtn && orderDetails.orderStatus == 1 " class="btn-box" plain @click="cardClick"
				type="default">{{ $t('orderDetails.refund') }}</button>
			<!-- 申请售后 -->
			<button v-if="showBtn &&orderDetails.orderStatus== 3 " class="btn-box" plain @click="cardClick"
				type="default">{{ $t('order.service') }}</button>
			<!-- 查看物流 -->
			<button v-if="showBtn && orderDetails.orderStatus == 2 " class="btn-box" :disabled="orderDetails.orderStatus != 2"
				plain @click="viewLogistics" type="default">
				{{ $t('orderDetails.logistics')  }}
			</button>
			<!-- 确认收货 -->
			<!-- <button v-if="showBtn && orderDetails.orderStatus == 1" class="btn-box" :disabled="orderDetails.orderStatus != 1" plain @click="viewLogistics" type="default">
				{{ $t('orderDetails.confirmReceipt') }}
			</button> -->
			<!-- 售后中 -->
			<!-- <button v-if="showBtn && (orderDetails.orderStatus == 4 ||orderDetails.orderStatus == 5)" class="btn-box"  plain @click="cardClick(orderDetails)" type="default">
				{{ $t('orderDetails.refunding') }}
			</button> -->



		</view>
		<view class="btn-control" v-if="orderDetails.returnInfo">
			<!-- 退款中 -->
			<button
				v-if="showBtn && (orderDetails.returnInfo.type == 3 && (orderDetails.orderStatus == 4 ||orderDetails.orderStatus == 5) && orderDetails.returnInfo.status != 6)"
				class="btn-box" plain @click="cardClick()" type="default">
				{{ $t('orderDetails.refunded') }}
			</button>
			<!-- 退货中 -->
			<button
				v-if="showBtn && (orderDetails.returnInfo.type == 1 && (orderDetails.orderStatus == 4 ||orderDetails.orderStatus == 5)&& orderDetails.returnInfo.status != 6)"
				class="btn-box" plain @click="cardClick()" type="default">
				{{ $t('orderDetails.ReturningGoods') }}
			</button>
			<!-- 换货中 -->
			<button
				v-if="showBtn && (orderDetails.returnInfo.type == 2 && (orderDetails.orderStatus == 4 ||orderDetails.orderStatus == 5)&& orderDetails.returnInfo.status != 6)"
				class="btn-box" plain @click="cardClick()" type="default">
				{{ $t('orderDetails.ExchangingGoods') }}
			</button>
			<!-- 售后完成 -->
			<button v-if="showBtn && orderDetails.returnInfo.status == 6" class="btn-box" plain @click="cardClick()"
				type="default">
				{{ $t('orderDetails.afterSaleCompletion') }}
			</button>
			<!-- 取消申请 -->
			<button v-if="showBtn && orderDetails.returnInfo.status == 0" class="btn-box" plain @click="cardClick()"
				type="default">
				{{ $t('system.cancelApplication') }}
			</button>
			<!-- 填写订单号 -->
			<button v-if="showBtn && orderDetails.returnInfo.status == 1 && orderDetails.returnInfo.type != 3" class="btn-box" plain @click="goFillTrackingNumber(1)"
				type="default">
				{{ $t('system.fillNumber') }}
			</button>
			
			<!-- 申请不通过 -->
			<!-- <button v-if="showBtn && orderDetails.returnInfo.status == -1" class="btn-box"  plain @click="cardClick(orderDetails)" type="default">
				{{ $t('orderDetails.applicationRejected') }}
			</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: 'orderCard',
		props: {
			// 商品详情
			orderDetails: {
				default: () => ({}),
				type: Object
			},
			// 按钮文字
			btnText: {
				default: '',
				type: String
			},
			icon: {
				default: false,
				type: Boolean
			},
			time: {
				default: '',
				type: String
			},
			followUrlData: {
				type: Object,
				default: () => ({})
			},
			showBtn: {
				default: false,
				type: Boolean
			},
			personal: {
				default: true,
				type: Boolean
			},
			//退换货
			showBtn1: {
				default: false,
				type: Boolean
			}
		},
		data() {
			return {};
		},
		created() {
			console.log(66666666, this.orderDetails);
		},
		onLoad() {

		},
		methods: {
			// 前往店铺首页
			goShopBar() {
				if (this.orderDetails) {
					uni.navigateTo({
						url: '/pages/shop/index?shopId=' + this.orderDetails.shopId
					});
				} else {
					uni.navigateTo({
						url: '/pages/shop/index?shopId=' + this.followUrlData.shopId
					});
				}
			},

			// 前往商品首页
			goGoodsDetail() {
				if (this.orderDetails.shopGoodsId) {
					uni.navigateTo({
						url: '/pages/productDetails/productDetails?productId=' + this.orderDetails.shopGoodsId
					});

				} else if(this.followUrlData.shopGoodsId) {
					uni.navigateTo({
						url: '/pages/productDetails/productDetails?productId=' + this.followUrlData.shopGoodsId
					});
				}



			},
			//填写运单号
			goFillTrackingNumber() {
				this.$u.vuex('vuex_shoping_cartList', this.orderDetails);
					uni.navigateTo({
						url: '/pages/order/fillTrackingNumber?type=0', //输入运单号++
						animationType: 'slide-in-right',
						animationDuration: 300
					});
			
			},
			// 卡片点击
			cardClick() {
				console.log('==-=-=-==', this.orderDetails);
				this.$emit('click', this.orderDetails);
			},
			pay() {
				this.$emit('pay', this.orderDetails);
			},
			viewLogistics() {
				this.$emit('viewLogistics', this.orderDetails);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.order-card-container {
		display: flex;
		position: relative;

		.describe-box {
			padding-left: 32rpx;
			padding-top: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 204rpx;
			width: calc(100% - 204rpx);

			>view {
				overflow: hidden;
			}

			.goods-name {
				color: #3b3b3b;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				margin: 10rpx;
			}

			.goods-des {
				margin-top: 8rpx;
				color: #a8a8a8;
				width: 50%;
			}

			.goods-qty {
				margin-top: 6rpx;
				color: #a8a8a8;
			}

			.goods-price {
				color: #1b1d29;
				font-size: 28rpx;

				font-weight: 500;

				&.original {
					margin-top: 12rpx;
				}

				>text {
					font-size: 20rpx;

					&:nth-child(1) {
						padding-left: 18rpx;
						color: #616161;
						text-decoration: line-through;
					}

					&:nth-child(2) {
						padding-left: 10rpx;
						color: #f26163;
					}
				}
			}

			.handle-button,
			.order-finished-time {
				display: flex;
				justify-content: flex-end;

				&.order-finished-time {
					font-size: 24rpx;
					color: #a8a8a8;
				}

				uni-button {
					width: 158rpx;
					height: 48rpx;
					border-radius: 12rpx;
					margin: 0;
					color: #2934d0;
					font-size: 28rpx;

					&::after {
						border: 2rpx solid #2934d0;
					}
				}
			}
		}

		.icon-box {
			padding-top: 20rpx;
			padding-left: 10rpx;
			display: flex;
			align-items: flex-start;

			.u-icon+.u-icon {
				margin-left: 26rpx;
			}
		}
	}

	.unshiped {
		color: #616161;
		background-color: #a8a8a8;
	}

	.control {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.btn-control {
		display: flex;
		justify-content: end;
		align-items: center;
	}

	.btn-box {
		padding: 0 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		border-radius: 12rpx;
		margin: 0;
		margin-top: 22rpx;
		margin-left: 10rpx;

		&[type='default']:not([plain]):not(.button-hover) {
			background: #2934d0;
		}

		&[plain] {
			border-color: #2934d0;

			&:not(.button-hover) {
				color: #2934d0;
			}
		}
	}

	.shop-name {
		display: flex;
		// justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;

		.shop-box {
			width: 280rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
</style>